<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>申请管理</el-breadcrumb-item>
                <el-breadcrumb-item>佣金申请列表</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="handleBox">
                <div>
                    <el-date-picker size="small" value-format="yyyy-MM" v-model="selectDate" type="month"
                        placeholder="选择查询月份" @change="getlist">
                    </el-date-picker>
                </div>
                <div>
                    <span>施工员：</span><el-select v-model="selectSaleUserId" placeholder="请选择施工员" @change="getlist"
                        size="small">
                        <el-option v-for="item in saleUserList" :key="item.userId" :label="item.userName"
                            :value="item.userId">
                        </el-option>
                    </el-select>
                </div>
                <div class="numBox">
                    <div>
                        <el-statistic :value="shopTotal" title="总安装门店数"></el-statistic>
                    </div>
                    <div>
                        <el-statistic :value="totalMoney" title="总获得佣金"></el-statistic>
                    </div>
                    <div>
                        <el-statistic :value="sendMoney" title="已发放佣金"></el-statistic>
                    </div>
                </div>
            </div>

            <el-table :data="tableList" border style="width: 100%" height="610"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="userId" label="ID" width="110"></el-table-column>
                <el-table-column prop="userName" label="施工员"></el-table-column>
                <el-table-column prop="openId" label="安装数"></el-table-column>
                <el-table-column prop="dan" label="单价(元)"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
import { getSaleUser, passCommission, listGMoney } from '../../network/preparer'
import {
    listSetting,
} from "../../network/pc";
export default {
    name: 'couInfo',
    data() {
        return {
            tableList: [],
            saleUserList: [],//施工员列表
            selectSaleUserId:'0',
            checkList: [],
            selectDate: '',
            
            shopTotal: 0, //总安装门店数
            totalMoney: 0,   // 可获得佣金
            sendMoney: 0, // 已发放的佣金数

            danMoney: 0,//  每一单佣金
        }
    },
    created() {
        var date = new Date()
        this.selectDate = date.getFullYear() + '-' + this.add0(Number(date.getMonth() + 1))

        this.getSaleUser()
        this.getMoneyList()
    },
    methods: {

        add0(num) {
            return num < 10 ? '0' + num : num
        },

        // 审核
        sendHandle(obj) {
            this.$confirm('是否已发放佣金?请谨慎操作', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                console.log(obj);
                passCommission({
                    applyId: obj.applyId,
                }).then(res => {
                    if (res.flag) {
                        this.$message.success('操作成功')
                        this.getlist()
                    } else {
                        this.$message.warning('操作失败，请重试')
                    }
                })


            }).catch(() => {
            });
        },


        handleSelectionChange(val) {
            this.ids = ''
            val.forEach(ele => {
                this.ids += ele.visitId + ','
            })
        },

        // 获取佣金申请列表
        getlist() {

            if (this.selectDate == '') {
                this.$message.warning('请选择要查询的月份')
                return
            }


            // this.selectDate = this.selectDate + "-01"
            console.log(this.selectSaleUserId);
            console.log(this.selectDate);

            // return


            listGMoney({
                time: this.selectDate + "-01",
                userId: this.selectSaleUserId,
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    // res.data[0].userBalance

                    var list = res.data, allUserBalance = 0;

                    this.shopTotal = 0, this.totalMoney = 0

                    list.forEach(ele => {
                        ele.dan = this.danMoney
                        this.shopTotal += ele.openId * 1
                        allUserBalance += ele.userBalance * 1
                    })

                    console.log(this.shopTotal);
                    this.totalMoney = this.shopTotal * this.danMoney
                    this.sendMoney = this.totalMoney - allUserBalance
                    this.tableList = list
                }
            })
        },

        handleSizeChange(val) {
            this.pageSize = val
            this.getlist()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getlist()
        },




        getSaleUser() {
            getSaleUser({
                companyId: 0,
                flag: 1  //  0 进销存查询人员  1 广告牌查询人员
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.saleUserList = res.data.filter(item => {
                        return item.userTag == -3
                    })


                    this.saleUserList.unshift({
                        userId: '0',
                        userName: '全部',
                    })
                }
            })
        },
        getMoneyList() {
            listSetting().then(res => {
                console.log(res);
                if (res.data != null) {
                    this.danMoney = res.data.money
                }
                console.log(this.danMoney);
                this.getlist()
            });
        },


    },
}
</script>

<style lang="less" scoped>
.handleBox {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.handleBox>div {
    margin-right: 16px;
}

.image-control {
    display: block;
    border-radius: 8px;
    width: 100px;
    height: 100px;
    background-color: #fafafa;
}

.paginationBox {
    margin-top: 30px;
    display: flex;
    justify-content: end;
}

.numBox {
    margin-left: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;

}

.numBox>div {
    margin-right: 30px;
}

/deep/.el-statistic .con .number {
    font-size: 24px !important;
}
</style>